<template>
    <div class="homePageBanner">
        <van-swipe :autoplay="2000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

export default {
    data() {
        return {
            images: [
                'https://yanxuan.nosdn.127.net/static-union/167361715637b102.jpg?type=webp&imageView&quality=75&thumbnail=750x0',
                'https://yanxuan.nosdn.127.net/static-union/16681571022bfbea.jpg?type=webp&imageView&quality=75&thumbnail=750x0',
                'https://yanxuan.nosdn.127.net/static-union/16599258542bfbea.jpg?type=webp&imageView&quality=75&thumbnail=750x0',
                'https://yanxuan.nosdn.127.net/static-union/16523200523cef51.jpg?type=webp&imageView&quality=75&thumbnail=750x0',
                'https://yanxuan.nosdn.127.net/fbb75aa5dfea5242193b16beb6c112a3.jpg?type=webp&imageView&quality=75&thumbnail=750x0'

            ],
        };
    },
};
</script>

<style >
.homePageBanner .van-swipe-item img {
    height: 12.375rem;
    width: 100%;
}

.homePageBanner .van-swipe__indicators .van-swipe__indicator {
    width: 1.375rem;
    height: .1875rem;
    background: #fff;
    opacity: 0.7;
    border-radius: 0;
}
</style>